<template>
    <!-- 内容 -->
    <div class="cont">
        <!--修改内容-->
        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
            <a-form-item label="标题">
                <a-input v-model:value="formState.title"/>
            </a-form-item>
            <a-form-item label="摘要">
                <a-textarea v-model:value="formState.describe" rows="1" cols="108"></a-textarea>
            </a-form-item>
            <a-form-item label="文章详情">
                <wangEditor v-if="datailChild" ref="edicts" :detailData="formState.details" @wChange="wChange"></wangEditor>
            </a-form-item>
            <a-form-item label="类别选择">
                <a-select class="classChange" v-model:value="formState.category_id">
                    <a-select-option class="classChangeChild" v-for="(item,index) in nameClssify" :key="index">{{item.name}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="请选择">
                <a-button type="primary" @click="addSure">确定</a-button>
                <a-button @click="cancel">取消</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import wangEditor from '../../components/wangEditor.vue'
    import apiArticle from '../../api/getConfig.js'
    export default {
        components: {
            wangEditor,
        },
        data() {
            return {
                datailChild:false,
                /*接受传下来的ID*/
                itemId:'',
                showText:1,
                formState:{
                    category_id:'',
                    details:'',
                    title:'',
                    describe:'',
                },
                labelCol: {span: 2},
                wrapperCol: {span: 14},
                /*遍历分类名*/
                nameClssify:'',
            }
        },
        beforeRouteLeave(to, form, next) {
            this.$refs.edicts.destroydd()
             next()
        },
     /*   beforeDestroy(){
            console.log(123);
        },
        destroyed(){
            console.log(45678);
        },*/
          mounted(){
            this.articleData();
            if (this.$route.query.data) {
              this.itemId = this.$route.query.data;
              this.getArticleData();
            }else {
                this.datailChild = true
            }
        },
        methods: {
      /*文章分类*/
            articleData(){
                apiArticle.getCate().then((res) => {
                   this.nameClssify= res.result
                })
            },
            /*获取文章详情*/
            getArticleData(){
                apiArticle.articleDetails(this.itemId).then((res) => {
                    this.formState = res.result;
                   this.datailChild = true // 调取数据显示组件
                })
            },

            wChange(e){
                this.formState.details = e;
            },
            // 点击确定
            addSure() {
                apiArticle.articleAddData(this.formState).then((res) => {
                    if (res.status === 1) {
                        this.$router.go(-1);
                    }
                });

            },/**/
            // 点击取消/**/
            cancel() {
              this.$router.go(-1);

            },
        },
    };
</script>

<style scoped>
    .alert {
        background: #fff;
        width: 600px;
    }
    .cont {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :deep( .ant-select-dropdown ){
        position: absolute;
        z-index: 999999999!important;
        background-color: red;
        padding: 50px;
        color: red;
    }
</style>
